<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购票选座</title>
    <link rel="stylesheet" href="../css/base.min.css">
    <link rel="stylesheet" href="../css/chooseseat.min.css">
    <!-- 字体图标 -->
    <link rel="stylesheet" href="../util/fontawesome/css/font-awesome.min.css">
    <!-- jQuery引入 -->
    <script src="../util/jQuery/jquery-3.5.1.min.js"></script>
    <script src="../js/chooseseat.js"></script>
    <script src="../js/login.js"></script>
    <script src="../js/search.js"></script>
</head>

<body>
    <!-- 登录框 -->
    <div class="interface">
        <div class="content">
            <div class="close">
                <button id="newclose"><i class="fa fa-close fa-2x"></i></button>
            </div>
            <div class="change">
                <ul id="newTab">
                    <li><a id="tab-login">登录</a></li>
                    <li><a id="tab-register">注册</a></li>
                </ul>
                <div class="text">
                    <div class="text1">
                        <input id="loginPhone" class="firstIput" type="text" placeholder="&nbsp;&nbsp;&nbsp;请输入手机号码">
                        <p class="phone-msg"></p>
                        <input id="loginPass" type="text" placeholder="&nbsp;&nbsp;&nbsp;请输入密码">
                        <p class="pass-msg"></p>
                        <div>
                            <input id="code" type="text" placeholder="&nbsp;&nbsp;&nbsp;验证码">
                            <span id="showCode">9527</span>
                        </div>
                        <button id="login">登录</button>
                        <input id="remember" type="checkbox" class="checkBox">
                        <p>&nbsp;&nbsp;记住密码</p><span><a>忘记密码?</a></span>
                        <hr>
                        <input id="reading" type="checkbox" class="checkBox">
                        <p class="newp">&nbsp;&nbsp;已阅读并同意《服务设计启发式线上工具服务协议》</p>
                    </div>
                    <div class="text2">
                        <input id="regPhone" class="phone" type="text" placeholder="&nbsp;&nbsp;&nbsp;请输入手机号码">
                        <p class="regphone-msg"></p>
                        <input id="regPass" type="text" placeholder="&nbsp;&nbsp;&nbsp;请输入密码">
                        <p class="regPass-msg"></p>
                        <input id="repass" type="text" placeholder="&nbsp;&nbsp;&nbsp;请确认密码">
                        <p class="rePass-msg"></p>
                        <button id="register">注册</button>
                        <span><a>立即登录</a></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 登录行 -->
    <div class="head-top">
        <div class="content" id="user">
            <div class="download">下载APP</div>
            <div class="user">
                <div id="btn-login"><a href="#">登录</a></div>
                <div id="btn-register">注册</div>
            </div>
        </div>
    </div>
    <!-- 导航栏布局 -->
    <header>
        <div class="content">
            <div class="logo">
                <img src="../images/logo.png" alt="">
                <span id="select">全国</span>
            </div>
            <nav>
                <li><a href="shouye.html">首页</a></li>
                <li class="active"><a href="film.html">影片</a></li>
                <li><a href="cinema.html">影城</a></li>
                <li><a href="movieInfo.html">影城资讯</a></li>
                <li><a href="personalcenter.html">会员中心</a></li>
            </nav>
            <div class="search">
                <input type="text" id="moviesName" placeholder="佩琪  白蛇2  我是猫">
                <i id="find" class="fa fa-search"></i>
                <div id="search">
                    <div class="box1"  id="recommend">
                        <p>相关推荐</p>
                        <ul>
                            <li>大话西游之大圣娶亲 西遊記大結局之仙履奇緣</li>
                            <li>哈利·波特与魔法石 Harry Potter and the Sorcerer's Stone</li>
                            <li>星大话西游之月光宝盒 西遊記第壹佰零壹回之月光寶盒</li>
                            <li>当幸福来敲门 The Pursuit of Happyness</li>
                            <li>星际穿越 Interstellar</li>
                            <li>大闹天宫</li>
                        </ul>
                    </div>
                    <div class="box2" id="history">
                        <p>搜索历史</p>
                        <span><a href="#" id="removeHistory">清空历史记录</a></span>
                        <ul></ul>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 中间主体内容部分 -->
    <main>
        <!-- 流程状态 -->
        <section>
            <div>
                <p>1</p>
                <div></div>
                <div></div>
                <p>2</p>
                <div></div>
                <div></div>
                <p>3</p>
                <div></div>
                <div></div>
                <p>4</p>
            </div>
            <div>
                <span>选择影片场次</span>
                <span>14分钟内付款</span>
                <span>选择座位</span>
                <span>影院取票观影</span>
            </div>
        </section>

        <!-- 过票选座位 -->
        <article>
            <!-- 选座位 -->
            <section>
                <!-- 图标示例参照 -->
                <div class="example">
                    <div><i class="kx"></i>可选座位</div>
                    <div><i class="ys"></i>已售座位</div>
                    <div><i class="yx"></i>已选座位</div>
                </div>
                <!-- 银幕中央 -->
                <div>
                    <img src="../images/icon_yingping.png" alt="">
                    <p>银幕中央</p>
                </div>
                <!-- 座位布局 -->
                <div class="sitting_list">
                    <dl class="row row1">
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    </dl>
                    <dl class="row row2">
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    </dl>
                    <dl class="row row3">
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    </dl>
                    <dl class="row row4">
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    </dl>
                    <dl class="row row5">
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    </dl>
                    <dl class="row row6">
                    <dd><div  class="nosit"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="nosit"></div></dd>
                    <dd><div  class="nosit"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="nosit"></div></dd>
                    <dd><div  class="nosit"></div></dd>
                    <dd><div  class="nosit"></div></dd>
                    </dl>
                    <dl class="row row7">
                    <dd><div  class="nosit"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="nosit"></div></dd>
                    <dd><div  class="nosit"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="nosit"></div></dd>
                    <dd><div  class="nosit"></div></dd>
                    <dd><div  class="nosit"></div></dd>
                    </dl>
                    <dl class="row row8">
                    <dd><div  class="nosit"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="nosit"></div></dd>
                    <dd><div  class="nosit"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="nosit"></div></dd>
                    <dd><div  class="nosit"></div></dd>
                    <dd><div  class="nosit"></div></dd>
                    </dl>
                    <dl class="row row9">
                    <dd><div  class="nosit"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="nosit"></div></dd>
                    <dd><div  class="nosit"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="nosit"></div></dd>
                    <dd><div  class="nosit"></div></dd>
                    <dd><div  class="nosit"></div></dd>
                    </dl>
                    <dl class="row row10">
                    <dd><div  class="nosit"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="nosit"></div></dd>
                    <dd><div  class="nosit"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="nosit"></div></dd>
                    <dd><div  class="nosit"></div></dd>
                    <dd><div  class="nosit"></div></dd>
                    </dl>
                    <dl class="row row11">
                    <dd><div  class="nosit"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="nosit"></div></dd>
                    <dd><div  class="nosit"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="kx"></div></dd>
                    <dd><div  class="nosit"></div></dd>
                    <dd><div  class="nosit"></div></dd>
                    <dd><div  class="nosit"></div></dd>
                    </dl>
                    <dl class="row row12">
                        <dd><div  class="nosit"></div></dd>
                        <dd><div  class="kx"></div></dd>
                        <dd><div  class="kx"></div></dd>
                        <dd><div  class="kx"></div></dd>
                        <dd><div  class="nosit"></div></dd>
                        <dd><div  class="nosit"></div></dd>
                        <dd><div  class="kx"></div></dd>
                        <dd><div  class="kx"></div></dd>
                        <dd><div  class="kx"></div></dd>
                        <dd><div  class="kx"></div></dd>
                        <dd><div  class="kx"></div></dd>
                        <dd><div  class="kx"></div></dd>
                        <dd><div  class="kx"></div></dd>
                        <dd><div  class="kx"></div></dd>
                        <dd><div  class="nosit"></div></dd>
                        <dd><div  class="nosit"></div></dd>
                        <dd><div  class="nosit"></div></dd>
                        </dl>
                    </div>
                    </div>
            </section>
            <!-- 侧边购票栏 -->
            <aside>
                <!-- <div class="movie-text">
                    <img src="../images/movie_sxwl.jpg" alt="">
                    <div>
                        <h3>盛夏未来</h3>
                        <p>类型 :<span>剧情,青春</span></p>
                        <p>时长：<span>115分钟</span></p>
                    </div>
                </div>
                <p>影院：<span>太平洋影城（北欧知识城店）</span></p>
                <p>影厅：<span>4号厅</span></p>
                <p>版本 :<span>国语2D</span></p>
                <p>场次 :<i>今天 8月11 19:30</i></p>
                <p>票价 : <span class="movie-price">￥38/张</span></p>
                <p>座位：一次最多选5个座位</p>
                <ul class="selected">
                    新增li标签
                    <p>请<i>点击左侧</i>座位图选择座位</p>
                </ul>
                <span>总价 :<em>￥</em><b id="movie-total">0</b></span> -->
                <div id="phone">
                    <input type="text" name="" placeholder="输入手机号">
                </div>
                <div id="code">
                    <input type="text" name="" placeholder="填写验证码">
                    <div class="code">获取验证码</div>
                </div>
                <button id="gopay">确认选座</button>
            </aside>
        </article>
    </main>

    <!-- 底部footer布局 -->
    <footer>
        <div class="content">
            <dl>
                <dt>新手上路</dt>
                <div class="divis"></div>
                <dd>注册登录问题</dd>
                <dd>用户绑定会员卡问题</dd>
                <dd>影票相关问题</dd>
                <dd>票价和支付问题</dd>
                <dd>取票凭证吗和取票问题</dd>
            </dl>
            <dl>
                <dt>购票指南</dt>
                <div class="divis"></div>
                <dd>用户购票流程</dd>
                <dd>取票观影指南</dd>
                <dd>会员卡支付相关说明</dd>
                <dd>网银支付相关说明</dd>
            </dl>
            <dl>
                <dt>会员权益</dt>
                <div class="divis"></div>
                <dd>会员订票权益</dd>
                <dd>会员积分权益</dd>
                <dd>入会资格</dd>
                <dd>会员卡折扣说明</dd>
            </dl>
            <dl>
                <dt>联系我们</dt>
                <div class="divis"></div>
                <dd>手机客户端介绍与下载</dd>
                <dd>影片信息查询</dd>
                <dd>手机自助购票</dd>
            </dl>
        </div>
        <div class="division"></div>
        <div class="frind_link">
            <p>公司介绍 - 合作咨询 - 友情链接 - 网站地图 - 站长统计 - 网站声明</p>
            <span>Copyright © 2021 ed by woniuxy</span>
        </div>
    </footer>
</body>

</html>